<template>
    <div class="platform-permission" ref="permission">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="名称">
                <el-input v-model="searchForm.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="编码">
                <el-input v-model="searchForm.code" placeholder="编码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
                <el-button type="primary" @click="handleCreate">新建</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                stripe
                default-expand-all
                size="mini"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                @row-dblclick="handleRowDbClick">
            <el-table-column
                    prop="name"
                    label="名称"
                    width="*"
                    min-width="120">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="编码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="value"
                    label="权限值"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="接口地址"
                    width="200">
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    prop="summary"
                    label="简介"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="65">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == '1'" type="success" size="mini">启用</el-tag>
                    <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    header-align="left"
                    align="center"
                    prop="sort"
                    label="排序"
                    width="60">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtCreate"
                    label="创建时间"
                    width="140">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtModified"
                    label="修改时间"
                    width="140">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            plain
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination :parentMethod="listPermission"
                          :pagination="this.$store.state.Navigation.pagination"></dormitory-pagination>
        <el-dialog
                :close-on-click-modal="false"
                title="权限管理"
                :visible.sync="dialogFormVisible"
                label-width="80px"
                @close="handleDialogClose">
            <el-form ref="form" :model="permissionForm" :disabled="permissionFormDisabled" label-width="80px">
                <el-form-item label="权限编码">
                    <el-input v-model="permissionForm.code"></el-input>
                </el-form-item>
                <el-form-item label="权限名称">
                    <el-input v-model="permissionForm.name"></el-input>
                </el-form-item>
                <el-form-item label="权限值">
                    <el-input v-model="permissionForm.value"></el-input>
                </el-form-item>
                <el-form-item label="权限地址">
                    <el-input v-model="permissionForm.url"></el-input>
                </el-form-item>
                <el-form-item label="权限简介">
                    <el-input v-model="permissionForm.summary"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="permissionForm.status" placeholder="请选择状态">
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="停用" :value="0"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="排序">
                    <el-input v-model="permissionForm.sort" type="number" min="0" max="90000"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import DormitoryPagination from "../../components/DormitoryPagination";

    import {listPermission,
        createPermission,
        updatePermission,
        deletePermission,
        selectPermission} from "../../../../api/platform/permission";
    import {getIdempotentCode} from "../../../../api/platform/idempotent";

    import PageSizeUtils from "../../../../utils/PageSizeUtils";

    export default {
        name: "Permission",
        components: {DormitoryPagination},
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                dialogInfoVisible: false,
                permissionForm: {
                    ukId: "",
                    code: "",
                    name: "",
                    value: "",
                    url: "",
                    summary: "",
                    status: 1,
                    sort: 10000
                },
                permissionFormDisabled: false,
                searchForm: {},
                idempotentCode: "",
                isUpdate: false
            };
        },
        methods: {
            listPermission(current, size) {
                listPermission(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.permissions.records
                    PageSizeUtils.setPagination(response.data.permissions)
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {
                getIdempotentCode().then(response => {
                    this.idempotentCode = response.data.idempotentCode
                    this.isUpdate = false
                    this.permissionForm = {}
                    this.dialogFormVisible = true;
                }).catch(error => {
                    console.log(error)
                })
            },
            handleEdit(index, row) {
                this.isUpdate = true
                this.dialogFormVisible = true;
                this.permissionForm = row
            },
            handleDelete(index, row) {
                deletePermission(row.ukId).then(response => {
                    this.listPermission();
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                this.listPermission(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleRefresh() {
                this.listPermission(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleReset() {
                this.searchForm = {}
            },
            handleSave() {
                if (this.isUpdate) {
                    updatePermission(this.permissionForm).then(response => {
                        this.listPermission();
                        this.dialogFormVisible = false;
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    createPermission(this.permissionForm, this.idempotentCode).then(response => {
                        this.listPermission();
                        this.dialogFormVisible = false;
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            handleRowDbClick(row, column, event) {
                selectPermission(row.ukId).then(response => {
                    this.permissionForm = response.data.permission
                    this.permissionFormDisabled = true
                    this.dialogFormVisible = true
                }).catch(error => {
                    console.log(error)
                })
            },
            handleDialogClose() {
                this.permissionFormDisabled = false
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            }
        },
        created() {
            this.listPermission(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size);
        },
    }
</script>

<style scoped>
    .platform-permission {
        background-color: #ffffff;
        border: #ffffff 3px solid;
    }
</style>
